<%--
  Created by IntelliJ IDEA.
  User: zzz
  Date: 2020/1/22
  Time: 16:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <style>
        .isSelected{
            border: 2px solid orange;
            position: relative;
            left: -5px;
            top: -5px;
            box-shadow: 10px 10px 5px #888888;
        }

    </style>
</head>
<body>

<div style="width: 150px; position: absolute; left: 700px; top: -85px; " class="form-group">
    <select id="vacancySort" style="padding: 3px;" class="js-example-basic-single">
        <option value="0">排序方式</option>
        <option value="1">销量从高到低</option>
        <option value="2">销量从低到高</option>
        <option value="3">价格从高到低</option>
        <option value="4">价格从低到高</option>
        <option value="5">上市时间从后到前</option>
        <option value="6">上市时间从前到后</option>
        <option value="7">下架时间从后到前</option>
        <option value="8">下架时间从前到后</option>
    </select>
</div>

<div class="card">
    <div class="card-body p-0">
        <form id="vacancySearch">
            <input id="vacancyLikeName" type="text" class="form-control border-0 p-15 p-l-20 h-auto font-size-15" placeholder="请输入商品名称...">
        </form>
    </div>
</div>

<div class="row" id="vacancyList">
</div>

<ul id="vacancyPaging" class="pagination pagination-rounded mb-3">

</ul>
</body>
</html>

<script>
    var vacancyPageNo = 1;
    $(function () {
        if(${requestScope.target == 'vacancyFurniture'}){
            vacancyPageNo = ${requestScope.pageNo};
        }
        vacancyFurnitureCards(vacancyPageNo);
        $("#vacancySort").change(function () {
            $("#customSwitch").prop("checked",false);
            vacancyFurnitureCards(1);
        });

        $("#vacancySearch").submit(function () {
            vacancyFurnitureCards(1);
            return false;
        });
    });

    function vacancyRender() {
        $(".vacancyFurniture").each(function () {
            $(this).click(function () {
                $(this).toggleClass("isSelected");
                $(this).children(".delete").fadeToggle("fast","linear");
            });
        });

        $(".delete,.read").click(function(e){
            e.stopPropagation();
        });
    }


    function vacancyFurnitureCards(pageNo) {
        var data = {
            ktid : ${requestScope.kindsType.ktid},
            sort : $("#vacancySort").val(),
            type : "vacancy",
            pageNo : pageNo,
            likeName : $("#vacancyLikeName").val()
        };
        $.ajax({
            url : "${APP_PATH}/furniture/findAll",
            method : "POST",
            data : data,
            beforeSend: function () {
                var furnitureContent = "";
                furnitureContent += '<div style="margin-left: 570px;" class="spinner-grow text-danger" role="status">';
                furnitureContent += '<span class="sr-only"></span>';
                furnitureContent += '</div>';
                $("#vacancyList").html(furnitureContent);
            },
            success: function (result) {
                if (result.success) {
                    var furnitureContent = "";
                    var pageContent = result.data.pageContent;
                    var furnitureList = result.data.datas;
                    vacancyPageNo = result.data.pageNo;
                    $("#vacancyBadge").html(result.data.count);
                    var badge = "";
                    if(furnitureList.length == 0){
                        furnitureContent += '<div style="margin-left:490px; margin-top: 100px; margin-bottom: 100px;"><img  src="${APP_PATH}/img/nodata.png" alt="..."></div>';
                        $("#vacancyPaging").hide();
                    }else{
                        $("#vacancyPaging").show();
                        for(var i = 0; i < furnitureList.length; i++){
                            var condition = furnitureList[i].condition;
                            var offtime = "";
                            if(furnitureList[i].offtime != null && furnitureList[i].offtime != ""){
                                offtime = furnitureList[i].offtime;
                            }else {
                                offtime = "该商品还未下架";
                            }
                            if(condition == 1){
                                badge = '<span style="float: right; margin-top: 1px;" class="badge badge-info">在售</span>';
                            }else{
                                badge = '<span style="float: right; margin-top: 1px;" class="badge badge-secondary">下架</span>';
                            }
                            furnitureContent += '<div class="col-lg-3 col-md-6">';
                            furnitureContent += '<div id="'+furnitureList[i].fid+'" class="card vacancyFurniture">';
                            furnitureContent += '<button onclick="myDelete('+furnitureList[i].fid+')" style="position: absolute; top: -15px; right: -15px; z-index: 100;" type="button"  class="btn btn-danger btn-floating delete"><i class="ti-trash"></i></button>';
                            furnitureContent += '<img class="card-img-top" src="${APP_PATH}/'+furnitureList[i].fface+'" alt="image">';
                            furnitureContent += '<div class="card-body">';
                            furnitureContent += '<p class="card-text">';
                            furnitureContent += '<span style="float: left;">'+furnitureList[i].fname+'</span>'+badge;
                            furnitureContent += '<small class="text-muted"><br>上市时间：'+furnitureList[i].markettime+'</small>';
                            furnitureContent += '<small class="text-muted"><br>下架时间：'+offtime+'</small>';
                            furnitureContent += '</p>';
                            furnitureContent += '<p class="card-text">';
                            furnitureContent += '<span style="float: left;">价格：￥'+furnitureList[i].fprice.toFixed(2)+'</span>';
                            furnitureContent += '<span style="float: right;">销售量：'+furnitureList[i].sales+' 件</span>';
                            furnitureContent += '</p>';
                            furnitureContent += '<button onclick="toFurnitureDetail('+furnitureList[i].fid+',\'vacancyFurniture\','+pageNo+')" style="margin-top: 20px;" type="button" class="btn btn-primary read"><i class="ti-eye m-r-10"></i>查看详情</button>';
                            furnitureContent += '</div>';
                            furnitureContent += '</div>';
                            furnitureContent += '</div>';
                        }

                    }

                    $("#vacancyList").html(furnitureContent);
                    $("#vacancyPaging").html(pageContent);
                    vacancyRender();
                }else {
                    swal("无法获取商品信息", {icon: "error"});
                }
            }
        });
    }
</script>
